<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 文本 -->
        <input type="text" v-model="msg" placeholder="输入内容">
        <p>信息是:{{msg}}</p>
        <!-- textarea -->
        <textarea v-model="msg"></textarea><br>
        <!-- checkbox -->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label><br>

        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="john" value="john" v-model="checkedNames">
        <label for="john">john</label>
        <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
        <label for="mike">mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
        <br>
        <!-- radio -->
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
        <!-- select option -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
        <br>
        <!-- multiple -->
        <select v-model="multiSelected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ multiSelected }}</span>
        <br>
        <!-- v-for render -->
        <select v-model="Vselected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ Vselected }}</span>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "",
                checked: "",
                checkedNames: [],
                picked: '',
                selected: '',
                multiSelected: [],
                Vselected: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]

            },

        });
    </script>
</body>

</html>